<template>
	<view class="content">
		<uni-search-bar placeholder="请输入关键词搜素" radius="100" cancel-button="none" v-model="kw" class="uni-search"
			@confirm="confirm" @clear="clear" />
		<view v-if="blogs.length==0" class="none">
			<image src="/static/icons(1)/nodata.png" mode="widthFix" class="logo"></image>
			<text>{{textData}}</text>
		</view>

		<view v-else v-for="(item,index) in blogs" class="item-container" @click="toBlogDetail(item.id)">
			<!-- 标题显示 -->
			<text class="item-title">{{item.title}}</text>
			<!-- 文章内容显示 -->
			<rich-text :nodes="item.description" class="item-desc"></rich-text>
			<!-- 图片显示 -->
			<image :src="item.picture" mode="widthFix" class="item-focus"></image>
			<!-- 头像显示 -->
			<image :src="item.user.avatar" mode="aspectFill" class="item-avatar" @click.stop="showBlogger(item.user)"></image>
			<!-- 显示标签，标签就是文本 -->
			<view>
				<!-- 只显示文本用utext,多个组件用vfor循环 索引，in在哪？key显示一个标签可以直接用本身，class可以直接写个标签，下面写样式-->
				<text v-for="(tag,index) in item.tags" :key="tag" class="item-tag">
					{{tag}}</text>
			</view>

			<view class="icon-container">
				<!-- <image src="/static/icons(1)/ic_good.png" class="icon"></image> -->
				<text
					:class="goodIds.indexOf(item.id)>=0?'iconfont icon-xihuan1 ic-red':'iconfont icon-xihuan1 ic-gray' "
					@click.stop="changeGood(item.id)"></text>

				<text class="icon-text">{{item.good}}</text>
				<image src="/static/icons(1)/ic_comment.png" class="icon"></image>
				<text class="icon-text">{{item.comments.length}}</text>
				<image src="/static/icons(1)/ic_count.png" class="icon"></image>
				<text class="icon-text">{{item.readCount}}</text>
			</view>
			<!-- <image src="/static/icons(1)/ic_delete.png" class="icon-tag"></image> -->
			<text class="iconfont icon-tianranqi icon-tag" @click.stop="drop(item.id)"></text>
		</view>

		<view class="bottom" v-if="blogs.length==count">
			---已经到达底部-----
		</view>

           <dialog-shell title="博主概况" ref="shell">
			   <text style="padding: 20rpx;">{{blogger}}</text>
		   </dialog-shell>
		   
		   
	</view>
</template>

<script>
	// const req=require("../../utlis/request.js")
	// import params from "../../utlis/params.js"
	export default {
		data() {
			return {
				textData: '抱歉，没有相关文章',
				blogs: [],
				page: 0,
				size: 3,
				count: -1,
				searching: false,
				kw: '',
				goodIds: [],
				blogger:''
			}
		},
		onLoad() {
			this.$noti.add(this.$params.noti_refresh_count, this.notiCount)
			this.$noti.add(this.$params.noti_change_good, this.notiGood, this)
			//点赞缓存
			let ids = uni.getStorageSync(this.$params.key_good_ids)
			if (ids) {
				this.goodIds = ids
			}
			// let hello=uni.getStorageSync("hello");
			// if(hello){
			// 	console.log(hello+"来自缓存");
			// }else{
			// 	console.log("缓存中没有找到hellow");
			// }
			let blogs = uni.getStorageSync(this.$params.key_blogs)
			if (blogs) {
				this.blogs = blogs
				this.count = blogs.length
				console.log(blogs[0]);
			} else {
				// console.log("没有找到数据");
				this.getPagedBlogs()
			}
			//加载数据

		},
		onUnload() {
			this.$noti.remove(this.$params.noti_refresh_count, this)
			this.$noti.remove(this.$params.noti_change_good, this)
		},
		onPullDownRefresh() {
			this.searching = false,
				this.kw = '',
				this.page = 0,
				this.count = -1,
				this.blogs = [],
				this.getPagedBlogs()
		},
		onReachBottom() {
			if (this.searching || this.blogs.length == this.count) {
				return
			}
			this.page++
			this.getPagedBlogs()
		},
		methods: {
			refreshComments(cmt){
			  this.blogs.forEach(b=>{
				  if(b.id==cmt.blogId){
					  b.comments=[...b.comments,cmt]
				  }
			  })	
			},
			showBlogger(user){
				this.blogger="作者："+user.nickName+"\n联系方式："+user.email
				this.$refs.shell.showDialog()
			},
			notiGood(info) {
				let id = info.id
				let count = info.count
				let ids = uni.getStorageSync(this.$params.key_good_ids)
				if (ids) {
					this.goodIds = ids
				}
				this.blogs.forEach(b=>{
					if(b.id==id){
						b.good=count
					}
				})
			},
			notiCount(info) {
				console.log("接受到通知refresh count");
				let id = info.id
				let count = info.count
				this.refreshReadCount(id, count)
			},
			refreshReadCount(id, count) {
				this.blogs.forEach(b => {
					if (b.id == id) {
						b.readCount = count
					}
				})
			},
			toBlogDetail(id) {
				uni.navigateTo({
					url: '/pages/blog/blog?id=' + id
				});
			},
			drop(id) {
				uni.showActionSheet({
					itemList: ["收藏", "删除", "举报"],
					success: res => {
						console.log(res);
						switch (res.tapIndex) {
							case 0:
								uni.showToast({
									title: '收藏成功，请在收藏中查看'
								});
								break;
							case 1:
								uni.showModal({
									title: '警告',
									content: '是否确认删除？',
									showCancel: true,
									cancelText: '再想想',
									confirmText: '删除',
									success: res => {
										// console.log(res);
										if (res.confirm) {
											uni.showToast({
												title: '没有权限删除,请登录',
												icon: 'none'
											});
										}
									},
									fail: () => {},
									complete: () => {}
								});

						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			changeGood(id) {
				let good = true //代表当前是点赞还是取消点赞
				if (this.goodIds.indexOf(id) >= 0) {
					good = false
				}
				if (good) {
					//1.把当前blog的id保存到缓存 2.把点赞加1发送到服务器
					this.goodIds = [...this.goodIds, id]
				} else {
					//1.把当前blog的id从缓存集合中删除 2.把点赞加1发送到服务器
					let index = this.goodIds.indexOf(id)
					if (index >= 0) {
						//删除方法
						//1.this.goodIds=this.goodIds.splice(index,1) splice靠循环来遍历事件
						//2.this.goodIds.shift() shift删除最后一个元素
						//3.this.goodIds.pop() pop删除最后一个元素
						this.goodIds[index] = this.goodIds[this.goodIds.length - 1]
						this.goodIds.pop()
					}
				}
				uni.setStorageSync(this.$params.key_good_ids, this.goodIds)
				this.postGood(id, good)
			},
			postGood(id, good) {
				uni.showLoading({
					title: '点赞...',
					mask: false
				});
				let url = this.$params.host
				let action = good ? this.$params.action_good : this.$params.action_del_good
				url += action
				let data = {
					"id": id
				}
				this.$req.postQuery(url, data, res => {
					// console.log(res);
					this.blogs.forEach(blog => {
						if (blog.id == id) {
							blog.good = res.data.data
						}
					})
				}, () => {
					uni.hideLoading()
				})
			},
			confirm(e) {
				//    console.log(e);	
				// console.log(this.kw);
				let kw = e.value; // 使用分号结束变量声明
				if (kw.length > 0) {
					this.searching = true,
						this.blogs = [];
					this.page = 0;
					this.count = -1;
					uni.showLoading({
						title: '搜索中ing...',
						mask: false
					});
					this.$req.get(this.$params.host + this.$params.action_search + kw, res => {
						console.log(res);
						res.data.data.forEach(blog => {
							blog.picture = this.$params.host + blog.picture;
							blog.user.avatar = this.$params.host + blog.user.avatar;
							this.blogs = [...this.blogs, blog];
						});
					}, () => {
						uni.hideLoading();
					});
				}
			},
			clear() {
				this.searching = false,
					this.blogs = [],
					this.page = 0,
					this.getPagedBlogs()
			},
			getPagedBlogs() {
				console.log("获取远端数据");
				// uni.setStorageSync("hello","hello"+this.$formatTime(new Date()))
				let header = {
					"content-type": "application/json;charset=UTF-8",
					"page": this.page,
					"size": this.size
				}
				this.$req.getWithParams(this.$params.host + this.$params.action_blogs_page, header, res => {
					console.log(res.data);
					res.data.data.forEach(blog => {
						blog.picture = this.$params.host + blog.picture
						blog.user.avatar = this.$params.host + blog.user.avatar
					})
					// this.blogs=this.blogs.concat(res.data.data)
					this.blogs = [...this.blogs, ...res.data.data]
					this.count = parseInt(res.data.message)
					uni.setStorageSync(this.$params.key_blogs, this.blogs)
				}, () => {
					uni.stopPullDownRefresh()
				})
			},
			getTopBlogs() {
				this.$req.get(this.$params.host + this.$params.action_top_blogs, res => {
					console.log(res.data);
					res.data.data.forEach(blog => {
						blog.picture = this.$params.host + blog.picture
						blog.user.avatar = this.$params.host + blog.user.avatar
					})
					this.blogs = res.data.data

				});
			}
		}
	}
</script>

<style>
	@import url("index.css");
</style>